<!DOCTYPE html>
<html>
<head>
<style>
#demo{
border-collapse:collapse;
font-size:42px;
}
#demo td{
border:1px solid #DDD;
}
button{
margin:10px;
}
select,input{
width:100px;
}
</style>
<script type="text/javascript" src="../dialogs/internal.js"></script>
</head>
<body>
<input id='_hv_status' type='hidden'/>
<table id='mainFrame'>
<tr><td>
颜色：<input id="b_colour" type="color"/><br/>
样式：<select id="b_style">
<option value='solid'>实线</option>
<option value='dashed'>虚线</option>
<option value='dotted'>点</option>
<option value='double'>双实线</option>
</select><br/>
线宽：<input id="b_width" type="number" value='2'/>
</td><td>
<table id='table_pannel'>
<tr><td>
<button id="top" onclick='btnStatus.toggleTop()'></button><br/>
<button id="h_middle" onclick='btnStatus.toggleHmiddle()'></button><br/>
<button id="bottom" onclick='btnStatus.toggleBottom()'></button>

</td><td>

<table id='demo'>
<tr><td>示例</td><td>示例</td><td>示例</td></tr>
<tr><td>示例</td><td>示例</td><td>示例</td></tr>
<tr><td>示例</td><td>示例</td><td>示例</td></tr>
</table>

</td></tr>
<tr><td></td><td>
<button id="left" onclick='btnStatus.toggleLeft()'></button>
<button id="v_middle" onclick='btnStatus.toggleVmiddle()'></button>
<button id="right" onclick='btnStatus.toggleRight()'></button>
</td></tr>
</table>
</td></tr>
</table>

</body>
<script>


Array.prototype.grep=function(s){
	var out=[];
	for(var i=0;i<this.length;i++){
		if (s(this[i])) out.push(this[i]);
	}
	return out;
};

var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	var img=document.createElement('img');
	img.src='icons/'+btns[i].id+'.png';
	btns[i].appendChild(img);
}
var btnStatus=function(){
	var b_style=document.getElementById("b_style");
	var b_colour=document.getElementById("b_colour");
	var b_width=document.getElementById("b_width");
	var existence=['1px solid #DDD','2px solid #000'];
	var refreshExistense=function(){
		existence[1]=b_width.value+'px '+b_style.value+' '+b_colour.value;
		console.log(existence[1]);
	};
	b_style.onchange=refreshExistense;
	b_colour.onchange=refreshExistense;
	b_width.onchange=refreshExistense;
	var h=[null,null,null];
	var v=[null,null,null];
	var trs=document.getElementById('demo').getElementsByTagName('tr');
	var tds=document.getElementById('demo').getElementsByTagName('td');
	var status=document.getElementById('_hv_status');
	console.log(tds);
	
	function color(flag){
		if (flag){
			return 'Lavender';
		}else{
			return 'silver';
		}
	}
	
	function setTop(x){
		document.getElementById('top').style.background=color(x);
		h[0]=x;
		if (h[0]!=null){
			for(var i=0;i<trs[0].cells.length;i++){
				trs[0].cells[i].style.borderTop=existence[h[0]];
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	function setHmiddle(x){
		document.getElementById('h_middle').style.background=color(x);
		h[1]=x;
		if (h[1]!=null){
			for(var j=1;j<trs.length;j++){
				for(var i=0;i<trs[0].cells.length;i++){
					trs[j].cells[i].style.borderTop=existence[h[1]];
				}
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	function setBottom(x){
		document.getElementById('bottom').style.background=color(x);
		h[2]=x;
		if (h[2]!=null){
			for(var i=0;i<trs[0].cells.length;i++){
				trs[trs.length-1].cells[i].style.borderBottom=existence[h[2]];
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	
	function setLeft(x){
		document.getElementById('left').style.background=color(x);
		v[0]=x;
		if (v[0]!=null){
			for(var i=0;i<trs.length;i++){
				trs[i].cells[0].style.borderLeft=existence[v[0]];
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	function setVmiddle(x){
		document.getElementById('v_middle').style.background=color(x);
		v[1]=x;
		if (v[1]!=null){
			for(var j=1;j<trs[0].cells.length;j++){
				for(var i=0;i<trs.length;i++){
					trs[i].cells[j].style.borderLeft=existence[v[1]];
				}
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	function setRight(x){
		document.getElementById('right').style.background=color(x);
		v[2]=x;
		if (v[2]!=null){
			for(var i=0;i<trs.length;i++){
				trs[i].cells[trs[i].cells.length-1].style.borderRight=existence[v[2]];
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	
		function getTop(x){
		return h[0];
	}
	function getHmiddle(x){
		return h[1];
	}
	function getBottom(x){
		return h[2];
	}
	
	function getLeft(x){
		return v[0];
	}
	function getVmiddle(x){
		return v[1];
	}
	function getRight(x){
		return v[2];
	}


	function toggleValue(a){
		if (a) {
			return 0;
		}else{
			return 1;
		}		
	}
	
	function toggleTop(){
		setTop(toggleValue(getTop()));
	}
	function toggleHmiddle(){
		setHmiddle(toggleValue(getHmiddle()));
	}
	function toggleBottom(){
		setBottom(toggleValue(getBottom()));
	}
	
	function toggleLeft(){
		setLeft(toggleValue(getLeft()));
	}
	function toggleVmiddle(){
		setVmiddle(toggleValue(getVmiddle()));
	}
	function toggleRight(){
		setRight(toggleValue(getRight()));
	}
	
	function refresh(){
	
		if (h[0]!=null){
			for(var i=0;i<trs[0].cells.length;i++){
				trs[0].cells[i].style.borderTop=existence[h[0]];
			}
		}
		
		if (h[2]!=null){
			for(var i=0;i<trs[0].cells.length;i++){
				trs[trs.length-1].cells[i].style.borderBottom=existence[h[2]];
			}
		}
		
		if (h[1]!=null){
			for(var j=1;j<trs.length;j++){
				for(var i=0;i<trs[0].cells.length;i++){
					trs[j].cells[i].style.borderTop=existence[h[1]];
				}
			}
		}
		
		if (v[0]!=null){
			for(var i=0;i<trs.length;i++){
				trs[i].cells[0].style.borderLeft=existence[v[0]];
			}
		}
		
		if (v[2]!=null){
			for(var i=0;i<trs.length;i++){
				trs[i].cells[trs[i].cells.length-1].style.borderRight=existence[v[2]];
			}
		}

		if (v[1]!=null){
			for(var j=1;j<trs[0].cells.length;j++){
				for(var i=0;i<trs.length;i++){
					trs[i].cells[j].style.borderLeft=existence[v[1]];
				}
			}
		}
		status.value=JSON.stringify({'h':h,'v':v});
	}
	
	return {'setTop':setTop,'setHmiddle':setHmiddle,'setBottom':setBottom,'setLeft':setLeft,'setVmiddle':setVmiddle,'setRight':setRight,
	'toggleTop':toggleTop,'toggleHmiddle':toggleHmiddle,'toggleBottom':toggleBottom,'toggleLeft':toggleLeft,'toggleVmiddle':toggleVmiddle,'toggleRight':toggleRight
	}
}();

function getTableItemsByRange(editor) {
        var start = editor.selection.getStart();

        //ff下会选中bookmark
        if( start && start.id && start.id.indexOf('_baidu_bookmark_start_') === 0 && start.nextSibling) {
            start = start.nextSibling;
        }

        //在table或者td边缘有可能存在选中tr的情况
        var cell = start && domUtils.findParentByTagName(start, ["td", "th"], true),
            tr = cell && cell.parentNode,
            caption = start && domUtils.findParentByTagName(start, 'caption', true),
            table = caption ? caption.parentNode : tr && tr.parentNode.parentNode;

        return {
            cell:cell,
            tr:tr,
            table:table,
            caption:caption
        }
};
	/*var tcells=getTableItemsByRange(editor).table.getElementsByTagName('td');
	var sCells=[];
	var minCol=Number.MAX_SAFE_INTEGER,minRow=Number.MAX_SAFE_INTEGER;
	var maxCol=Number.MIN_SAFE_INTEGER,maxRow=Number.MIN_SAFE_INTEGER;
	for(var i=0;i<tcells.length;i++){
		if (tcells[i].classList.contains('selectTdClass')){
			sCells.push(tcells[i]);
			if (tcells[i].cellIndex<minCol) minCol=tcells[i].cellIndex;
			if (tcells[i].parentNode.rowIndex<minRow) minRow=tcells[i].parentNode.rowIndex;
			if (tcells[i].cellIndex>maxCol) maxCol=tcells[i].cellIndex;
			if (tcells[i].parentNode.rowIndex>maxRow) maxRow=tcells[i].parentNode.rowIndex;
		}
	}
	var cellMatrix=[];
	for(var i=0;i<sCells.length;i++){
		if ((typeof cellMatrix[sCells[i].parentNode.rowIndex-minRow])=='undefined') cellMatrix[sCells[i].parentNode.rowIndex-minRow]=[];
		cellMatrix[sCells[i].parentNode.rowIndex-minRow][sCells[i].cellIndex-minCol]=sCells[i];
	}*/
</script>
</html>